@import './variable.scss'; // css变量

.attendance{
    .btn-box-most{
        width:100%;
        position:absolute;bottom:0;left:0;z-index:2;
    }
}

.attendance-record{
  .box-top{
      .box-wrap{
          margin:0 auto;
          width:98%;
      }
      $badgeWH:.11rem;
      .legend-line{
          line-height:2.5;
          background:#fff;
          li{
              width: 1.11rem;
              i,span{vertical-align: middle;}
              .badge{
                  display: inline-block;
                  padding:0;margin-right:.074rem;
                  width: $badgeWH; height: $badgeWH;
                  border-radius:50%;
              }
          }
      }
      
  }
  .box-bottom{
      background: #fff;
      .line-box{
          padding: .37rem 0;
          .view-line{
              .view-line-item{
                  line-height:2.8;
                  .fl{
                      color:#a2a2a2;
                  }
              }
          }
      }
  }
}
.sum-detail-box{
    padding: .37rem 0;
    width:100%;
    text-align: center;
    background:#fff;
    border-top:1px solid $borderColor;
    li{
        display: inline-block;
        width:24%;
        line-height:1.5;
        .num{
            font-weight:bold; font-size: .4rem;
        }
    }
}



// 座位列表 点名
.seat-list-box{
    width:100%;
    background:#fff;

    .seat-list{
        margin:0 auto;
        width:90%;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap:wrap;

        $item:1.48rem;
        .seat-list-item{
            position: relative;
            margin:.1rem;
            width: $item;height: $item;
            text-align: center;

            $headerWH: .74rem;
            .icon-header{
                position: relative;
                margin-top: .185rem;
                width:$headerWH;height:$headerWH;

                .badge{
                    position:absolute; top: -.037rem; right: -.037rem;
                    padding: 0; 
                    width: .15rem; height: .15rem;
                    border-radius:50%;
                }
                .badge.icon-checkbox{
                    top: -.11rem; right: -.11rem;
                    padding:0;
                    width:.36rem; height:.36rem;
                    background-size:cover;
                }
                
            }
            .name{
                line-height:2;
            }


            .status-dialog-box{
                position:absolute;left: $item;top: 0;

                ul{
                    position: absolute;z-index: 3;
                    width: 2rem;
                    background:#fff;
                    box-shadow: 0 0.074rem .37rem #5f5f5f;
                    border-radius:.148rem;
                    li{
                        margin:0 auto;
                        width:80%;
                        line-height: 2.5;
                        $badgeWH:.185rem;
                        .badge{
                            width:$badgeWH; height:$badgeWH;
                            padding:0;
                        }
                        i,span{
                            vertical-align: middle;
                        }
                    }
                }
                .rectangle-box{
                    position:absolute; left:  calc((#{$item} - 1.05rem) * -1); top: .37rem; z-index: 6;
                    width:0; height:0;
                    border-top:.22rem solid transparent;
                    border-bottom:.22rem solid transparent;
                    border-right:.22rem solid #fff;
                    border-left:.22rem solid transparent;
                }

            }
        }

        .right{
            .status-dialog-box{
                left: calc((#{$item} + .37rem) * -1);
                .rectangle-box{
                    left: 2rem;
                    border-left:.22rem solid #fff;
                    border-right:.22rem solid transparent;
                }
            }
        }

    }

}